<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/signin.css">
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>每日签到</title>
    <style>
        .layui-m-layerchild{
            width: 80% !important;
        }
        .layui-m-layercont{
            padding: 0!important;
            line-height: normal!important;
        }
    </style>
</head>
<body>
<div class="top flex flex-align-end flex-pack-center flex-warp">
    <i class="icon iconfont icon-iconfontjiantou1"></i>
    <div class="out-1 flex flex-align-center flex-pack-center" id="signIn">
        <div class="out-2 flex flex-align-center flex-pack-center">
            <div class="signBtn">
                <strong id="sign-txt">签到</strong>
                <span>连续<em id="sign-count">0</em>天</span>
            </div>
        </div>
    </div>
</div>
<div class="tips">今天已签到，获得1次抽奖机会</div>
<!--日历-->
<div class="Calendar">
    <div id="toyear" class="flex flex-pack-center">
        <div id="idCalendarPre">&lt;</div>
        <div class="year-month">
            <span id="idCalendarYear">2018</span>年<span id="idCalendarMonth">6</span>月
        </div>
        <div id="idCalendarNext">&gt;</div>
    </div>
    <table border="1px" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="tou">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
    </table>
</div>
<!--说明-->
<div class="signExplain">
    <ul class="flex">
        <li class="flex-1">
            <div class="receiveBtn">可领取</div>
            <p>抽奖次数+1</p>
        </li>
        <li class="flex-1">
            <div><span>14</span>天</div>
            <p>抽奖次数+2</p>
        </li>
        <li class="flex-1">
            <div><span>25</span>天</div>
            <p>抽奖次数+3</p>
        </li>
    </ul>
    <div class="signExplainText">
        <h4>签到规则</h4>
        <ul>
            <li class="clearfix">
                <i class="fl">1</i>
                <span class="fl">每天签到1次可获得一次抽奖机会。</span>
            </li>
            <li class="clearfix">
                <i class="fl">2</i>
                <span class="fl">连续签到7天可额外获得1次抽奖机会。</span>
            </li>
            <li class="clearfix">
                <i class="fl">3</i>
                <span class="fl">累计签到14天可额外获得2次抽奖机会，累计签到25天可额外获得3次抽奖机会。</span>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/rili.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script language="JavaScript">
    var isSign = false;
    var myday = new Array(); //已签到的数组
    //			myday[0] = "1528646400"
    //			myday[1] = "1528387200"
    //			myday[2] = "1525708800"

    var cale = new Calendar("idCalendar", {
        qdDay: myday,
        onToday: function(o) {
            o.className = "onToday";
        },
        onSignIn: function (){
            $$("sign-txt").innerHTML = '已签到';
        },
        onFinish: function() {
            $$("sign-count").innerHTML = myday.length; //已签到次数
            $$("idCalendarYear").innerHTML = this.Year;
            $$("idCalendarMonth").innerHTML = this.Month; //表头年份

        }
    });
    $$("idCalendarPre").onclick = function() {
        cale.PreMonth();
    }
    $$("idCalendarNext").onclick = function() {
        cale.NextMonth();
    }
    //添加今天签到
    $$("signIn").onclick = function() {
        if(isSign == false) {
            var res = cale.SignIn();
            if(res == '1') {
                $$("sign-txt").innerHTML = '已签到';
                $$("sign-count").innerHTML = parseInt($$("sign-count").innerHTML) + 1;
                isSign = true;
                layer.open({
                    shadeClose: false,
                    content: '\<\div id="signState">' +
                    '<div class="signStateGreen"><img src="images/signState_icon.png" alt=""/></div>'+
                    '<div class="signStateWhite"><h4>签到成功</h4><p>获得一次抽奖机会</p><a href="每日抽奖.html">去抽奖</a></div>'+
                    '<img class="signClose" src="images/signClose.png"/>'+
                    '\<\/div>'
                });
            } else if (res == '2'){
                $$("sign-txt").innerHTML = '已签到';
                layer.open({
                    shadeClose: false,
                    content: '\<\div id="signState">' +
                    '<div class="signStateGreen signed"><img src="images/signState_icon_01.png" alt=""/></div>'+
                    '<div class="signStateWhite"><h4>今日已签到</h4><p>今日已签到，请勿重复签到</p><a class="confirmBtn" href="javascript:void(0)">确定</a></div>'+
                    '<img class="signClose" src="images/signClose.png"/>'+
                    '\<\/div>'
                });
            }
        } else {
            layer.open({
                shadeClose: false,
                content: '\<\div id="signState">' +
                '<div class="signStateGreen signed"><img src="images/signState_icon_01.png" alt=""/></div>'+
                '<div class="signStateWhite"><h4>今日已签到</h4><p>今日已签到，请勿重复签到</p><a class="confirmBtn" href="javascript:void(0)">确定</a></div>'+
                '<img class="signClose" src="images/signClose.png"/>'+
                '\<\/div>'
            });
        }
    };
    //关闭弹窗
    $(document).on("click",".signClose",function(){
        layer.closeAll();
    });
    $(document).on("click",".confirmBtn",function(){
        layer.closeAll();
    });
    //点击领取
    $(".signExplain").on("click",".receiveBtn",function(){
        $(this).text("已领取");
        $(this).addClass('greenBg');
    })
</script>
</body>
</html>